<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
	body
	{
		margin:30px;
	}
	.serach {
		width: 40px;
		padding: 5px 10px;
		border: 10px solid transparent;
		border-image: url(http://www.w3school.com.cn/i/border_image_button.png) 0 14 0 14 stretch;
	}
	.img3 {
		border:15px solid transparent;
		width:300px;
		padding:10px 20px;
		border-image: url(http://www.w3school.com.cn/i/border.png) 30 30 round;
	}
	.img4 {
		border:15px solid transparent;
		width:300px;
		padding:10px 20px;
		border-image: url(http://www.w3school.com.cn/i/border.png) 20 20 stretch;
	}
	</style>
<!--  Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。
定义和用法
border-image 属性是一个简写属性，用于设置以下属性：

border-image-source	用在边框的图片的路径。	
border-image-slice	图片边框向内偏移。	
border-image-width	图片边框的宽度。	
border-image-outset	边框图像区域超出边框的量。	
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretch)。
-->
<div class="serach">
	Search
</div>
<div>
	------------------------------------
</div>
<div class="img1">
	<p>这是我们使用的图片：</p>
	<img src="http://www.w3school.com.cn/i/border_image_button.png" alt="">
</div>
<div class="img2">
	<p>原始图片</p>
	<img src="http://www.w3school.com.cn/i/border.png" alt="">
</div>
<br>
<br>
<br>
<br>
<div class="img3">
	border-image 属性允许您规定用于边框的图片！
</div>
<div class="img4">
	border-image 属性允许您规定用于边框的图片！
</div>
</body>
</html>